<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<title>送你一颗小爱心</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			html{
				animation: html 4s ease infinite;
			}
			
			.heart{
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				margin: 300px auto;
				position: relative;
				transform: rotate(45deg);
				animation: heart 4s ease infinite;
			}
			.heart::before{
				content: "";
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				border-radius: 50%;
				position: absolute;
				top: -100px;
				left: 0;
				animation: left 4s ease infinite;
				transform: all 1s ease;
			}
			.heart::after{
				content: "";
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				border-radius: 50%;
				position: absolute;
				top:0;
				left: 100px;
				animation: right 4s ease infinite;
				transform: all 1s ease;
			}
			
			@keyframes  html{
				0%{
					background-color: #eb3f84;
				}
				50%{
					background-color: #fff;
				}
				100%{
					background-color: #eb3f84;
				}
			}
			
			@keyframes heart{
				0%{
					transform: rotate(0deg);
					border-radius: 200px;
					background-color: #fff;
				}
				30%{
					transform: rotate(45deg);
					border-radius: 10px;
				}
				50%{
					background-color: #eb3f84;
				}
				70%{
					transform: rotate(45deg);
					border-radius: 10px;
				}
				100%{
					transform: rotate(90deg);
					border-radius: 200px;
					background-color: #fff;
				}
			}
			
			
			@keyframes  left{
				0%{
					top:0px;
					background-color: #FFF;
				}
				30%{
					top:-100px;
				}
				50%{
					background-color: #eb3f84;
				}
				70%{
					top: -100px;
				}
				100%{
					top: 0;
					background-color: #ffffff;
					}
			}
			@keyframes  right{
				0%{
					left:0px;
					background-color: #FFF;
				}
				30%{
					left:-100px;
				}
				50%{
					background-color: #eb3f84;
				}
				70%{
					left: -100px;
				}
				100%{
					left: 0;
					background-color: #FFFFFF;
				}
			}
			
			
		</style>
	</head>
	<body>
		<div class="heart"></div>
		
	</body>
</html>
